<script setup lang="ts">
import { reactive } from 'vue'
import { ElIcon } from 'element-plus'
import { ElementPlus } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const state = reactive({
  list1: [{
    name: 'Deepseek',
    desc: 'aaa',
    icon: '',
    viewName: 'chat'
  },
  {
    name: '职业道德教育',
    desc: 'aaa',
    icon: ''
  },
  {
    name: '职业道德教育',
    desc: 'aaa',
    icon: ''
  },
  ]
})

const onOpenChat = (name: any) => {
  if (name) {
    router.push({ name })
  }
}
</script>

<template>
  <div class="chat">
    <label>招生部门</label>
    <div class="item-wrap">
      <div v-for="item in state.list1" class="item" @click="onOpenChat(item.viewName)">
        <el-icon><ElementPlus /></el-icon>
        <div class="text">
          <div class="title">{{ item.name }}</div>
          <div class="sub">{{ item.desc }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.chat {
  padding: 15px;
  border-radius: 10px;
  background: #dfd9cb;
  label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .item-wrap {
    width: 960px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    .item {
      width: 200px;
      background: #ffffff;
      padding: 15px;
      border-radius: 10px;
      display: flex;
      gap: 10px;
      align-items: start;
      .sub {
        color: #A3A6AD;
      }
    }
  }
}

</style>
